<template>
    <div class="breadCrumb">
        <router-link :to="{name:item.name}" v-for="item in data" :key="item.name">{{item.meta.name+separator}}</router-link>
    </div>
</template>
<script setup>
import {watchEffect,toRefs} from "vue"
    let props = defineProps({
        data:{
            type:Array,
            default(){
                return[]
            }
        },
        separator:{
            type:String,
            default(){
                return "/"
            }
        }
    })
    watchEffect(()=>{

        console.log(props.data);
    }) 


    let {data,separator} = toRefs(props)
    console.log(props);
</script>
<style scoped>
    .breadCrumb{
        /* border: 1px solid; */
        margin: 10px 0;
    }
    .breadCrumb a{
        color: pink;
        margin: 0 5px;
    }
</style>
